<template>
  <div>
    <search-form
      :search-config="searchConfig"
      :label-width="150"
      @clear="clearSearch"
      @search="handleSearch"
    />
    <table-box
      ref="refTable"
      table-size="mini"
      :table-config="tableConfig"
      show-selection
      dragable
      no-request
      :selected-arry.sync="tableSelected"
      :other-filters="otherFilters"
      @btnOperate="btnOperate"
      @selection-change="selectionChangeHandle"
    >
      <template slot="setting-before" style="width:50%">
        当前查询门店：
        <el-select
          style="width:300px"
          placeholder="请选择"
          :value="shopData"
          value-key="shopName"
          @change="changeShop"
        >
          <el-option
            v-for="item in shopList"
            :key="item.shopCode"
            :label="item.shopName"
            :value="item"
          />
        </el-select>
      </template>
    </table-box>

    <edit v-if="showEdit" :visible.sync="showEdit" :detail-data="editForm" @success="refreshTable" />
  </div>
</template>
<script>
import { getShopList } from '@/api/display/salesData'

import edit from './Edit.vue'
import { updateData } from '@/api/display/displayTotal'
export default {
  name: 'DisplayTotal',
  components: { edit },
  data() {
    return {
      shopData: { shopCode: undefined, shopName: '全部' },
      shopList: [],
      tableSelected: [],
      otherFilters: [],
      showEdit: false,
      editForm: {},
      searchConfig: [
        // { label: '门店编码', prop: 'shopCode', type: 'text', value: '', placeholder: '' },
        { label: '所属专区', prop: 'belongAreaName', type: 'text', value: '', placeholder: '' },
        {
          label: '启用状态',
          prop: 'enable',
          type: 'radio',
          value: '',
          placeholder: '',
          config: {
            selectData: [
              { label: '全部', value: '' },
              { label: '启用', value: '1' },
              { label: '停用', value: '0' }
            ]
          }
        }
      ],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/displayProductTotal/page`,
        buttonGroupCode: 'default',
        hideSearchBar: true,
        tabIndex: 0,
        pageSize: 10,
        order: 'desc',
        // sort: 'createTime',
        // 表格字段动态配置
        setting: [
          {
            prop: 'shopCode',
            label: '门店编码',
            minWidth: '140'
          },
          {
            prop: 'shopName',
            label: '门店名称',
            minWidth: '140'
          },
          // {
          //   prop: 'zoneDivisionCode',
          //   label: '专区划分',
          //   minWidth: '140',
          //   propEnum: {
          //     domainCode: 'marketing',
          //     appCode: 'slm',
          //     dictTypeCode: 'ZONE_DIVISION'
          //   }
          // },
          {
            prop: 'belongAreaName',
            label: '所属专区',
            minWidth: '140'
          },
          {
            prop: 'productTotal',
            label: '可陈列产品数量',
            minWidth: '140'
          },
          {
            prop: 'enable',
            label: '启用状态',
            minWidth: '140',
            render: function(createElement, rows) {
              if (rows.enable === 1 || rows.enable === 0) {
                return (<div>
                  <svg-icon class={rows.enable === 1 ? 'icon-on' : 'icon-off'}
                    icon-class={rows.enable === 1 ? 'zhengquewancheng-line' : 'jinzhi'}></svg-icon>
                  {rows.enable === 1 ? '启用' : rows.enable === -1 ? '失效' : '停用' }
                </div>
                )
              }
              return ''
            }
          }
        ],
        btnList: this.isProduction ? null : [{
          buttonName: '新增',
          outerFlag: true,
          optCode: 'add'
        },
        {
          buttonName: '编辑',
          outerFlag: true,
          optCode: 'edit'
        },
        {
          buttonName: '停用',
          outerFlag: true,
          optCode: 'disable'
        },
        {
          buttonName: '启用',
          outerFlag: true,
          optCode: 'enable'
        }]
      }
    }
  },
  computed: {
  },
  created() {
    getShopList().then(res => {
      if (res.success && res.data.length === 0) {
        this.$message.warning('当前用户下没有门店')
      } else if (res.success && res.data.length > 0) {
        this.shopList = [{ shopName: '全部', shopCode: res.data.map(v => v.shopCode).join(',') }, ...res.data]
        this.changeShop(this.shopList[0])
        this.otherFilters = [{ 'id': 'shopCode', 'property': 'shopCode', 'operator': 'in', 'value': '[' + this.shopList[0].shopCode + ']' }]
        this.$nextTick(() => {
          this.refreshTable()
        })
      }
    })
  },
  methods: {
    changeShop(data) {
      this.shopData = { shopName: data.shopName, shopCode: data.shopCode }
    },
    refreshTable(isOld) {
      if (this.shopList.length === 0) {
        this.$message.warning('当前用户下没有门店')
        return
      }
      this.$refs.refTable.initTableData(isOld ? 'onPage' : '')
    },
    selectionChangeHandle(data) {
      this.tableSelected = data
    },
    // 搜索
    handleSearch(data) {
      if (this.shopList.length === 0) {
        this.$message.warning('当前用户下没有门店')
        return
      }
      const isAllShop = this.shopData.shopCode.includes(',')
      this.otherFilters = [...data.filtersRaw, { 'id': 'shopCode', 'property': 'shopCode', 'operator': isAllShop ? 'in' : '=', 'value': isAllShop ? ('[' + this.shopData.shopCode + ']') : this.shopData.shopCode }]
      this.$nextTick(() => {
        this.$refs.refTable.initTableData()
      })
    },
    // 清空搜索
    clearSearch(data) {
    },
    btnOperate(flag) {
      switch (flag) {
        case 'add':
          this.handleEdit(0)
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', true)) {
            return
          }
          this.handleEdit(1)
          break
        case 'disable':
          if (!this.singleJudge(this.tableSelected, '停用', false)) {
            return
          }
          this.handleUpdate(0)
          break
        case 'enable':
          if (!this.singleJudge(this.tableSelected, '启用', false)) {
            return
          }
          this.handleUpdate(1)
          break
        default:
          break
      }
    },
    handleAdd() {

    },
    handleUpdate(type) {
      const temp = this.tableSelected.filter(v => v.enable === type)
      if (temp.length > 0) {
        this.$message.warning(`所选项已包括【${type ? '启用' : '停用'}】状态，请重新选择`)
        return
      }
      const data = this.tableSelected.map(v => { return { ...v, enable: type } })
      updateData(data).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.refreshTable(1)
        }
      })
    },
    handleEdit(type) {
      if (this.shopList.length === 0) {
        this.$message.warning('当前用户下没有门店')
        return
      }
      if (!type) this.editForm = {}
      else this.editForm = this.tableSelected[0]
      this.showEdit = true
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
